<script lang="ts">
    import props from "./props";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import UTransition from "@/uni_modules/u-transition/components/u-transition/u-transition.vue";

    export default defineComponent({
        // 类名
        name: "u-overlay",
        // 组件
        components: {UTransition},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["click"],
        // 方法
        methods: {
            // 点击事件
            clickHandler(event: Record<string, any>): void
            {
                this.$emit("click", event);
            }
        }
    });
</script>

<template>
    <!-- 遮罩层组件 -->
    <u-transition
        :custom-style="{position: 'fixed', left: 0, right: 0, bottom: 0, top: 0, zIndex: zIndex, backgroundColor: 'rgba(0, 0, 0, ' + opacity + ')'}"
        :duration="duration"
        :show="show"
        custom-class="u-overlay"
        mode="fade"
        @tap="clickHandler"
        @touchmove.stop.prevent="() => {}"
    >
        <slot />
    </u-transition>
    <!-- //遮罩层组件 -->
</template>

<style lang="scss" scoped>
    .u-overlay
    {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>